import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/pie/lit-pie-nest.ts"
import {PieNestProps} from "../../../echarts/pie/lit-pie-nest.ts";

const meta: Meta<PieNestProps> = {
    title: 'Echarts/LitPieNest',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: PieNestProps): TemplateResult => {
        return html`
            <lit-pie-nest
                    .chartId=${args.chartId}
                    .width=${args.width}
                    .height=${args.height}
                    .legend=${args.legend}
                    .seriesData=${args.seriesData}
            />`;
    },
    argTypes: {
        chartId: {control: 'text'},
        width: {control: 'text'},
        height: {control: 'text'},
        legend: {control: 'object'},
        seriesData: {control: 'object'},
    },
}

export default meta;
type Story = StoryObj<PieNestProps>;

export const Default: Story = {
    args: {
        chartId: 'pie-nest-chart',
        width: '1200px',
        height: '600px',
        legend: [
            ['Search Engine', 'Direct', 'Marketing'],
            ['Email', 'Union Ads', 'Video Ads', 'Baidu', 'Google', 'Bing', 'Others']
        ],
        seriesData: [
            [
                { value: 1548, name: 'Search Engine' },
                { value: 775, name: 'Direct' },
                { value: 679, name: 'Marketing' }
            ],
            [
                { value: 1048, name: 'Baidu' },
                { value: 335, name: 'Direct' },
                { value: 310, name: 'Email' },
                { value: 251, name: 'Google' },
                { value: 234, name: 'Union Ads' },
                { value: 147, name: 'Bing' },
                { value: 135, name: 'Video Ads' },
                { value: 102, name: 'Others' }
            ]
        ]
    }
};